/*
 * @Author: your name
 * @Date: 2021-12-17 14:36:31
 * @LastEditTime: 2021-12-22 10:09:54
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \first_one_file\react-travel\src\pages\home\home.tsx
 */
import React from 'react';
import axios from 'axios';
import { connect } from 'react-redux';
import { withTranslation, WithTranslation } from 'react-i18next';
import { Row, Col, Typography, Spin } from 'antd';
import {
  Header,
  Footer,
  Carousel,
  SideMenu,
  ProductCollection,
  BusinessPartners
} from '../../components';

// import { productList1, productList2, productList3 } from "../../pages/home/mockups";
import sideImage from '../../assets/images/sider_2019_12-09.png';
import sideImage2 from '../../assets/images/sider_2019_02-04.png';
import sideImage3 from '../../assets/images/sider_2019_02-04-2.png';
import styles from './HomePage.module.css';
import { RootState } from '../../redux/store';
import {
  giveMeDataActionCreator
} from '../../redux/recommendProducts/recommendProductsActions';

const mapStateToProps = (state: RootState) => {
  return {
    loading: state.recommendProducts.loading,
    error: state.recommendProducts.error,
    productList: state.recommendProducts.productList
  }
}

const mapDispatchToProps = (dispatch: any) => {
  return {
    giveMeData: () => {
      dispatch(giveMeDataActionCreator());
    }
  };
};

type PropsType = WithTranslation &
ReturnType<typeof mapStateToProps> &
ReturnType<typeof mapDispatchToProps>;


class HomePageComponent extends React.Component<PropsType> {

  componentDidMount() {
    this.props.giveMeData();
  }

  render() {
    const { t, productList, loading, error }: any = this.props;
    if (loading) {
      return (
        <Spin
          size="large"
          style={{
            marginTop: 200,
            marginBottom: 200,
            marginLeft: "auto",
            marginRight: "auto",
            width: "100%"
          }}
        />
      )
    }

    if (error) {
      return <div>网站出错：{error}</div>;
    }

    return (
      <>
      <Header />
      <div className={styles['page-content']}>
        <Row style={{marginTop: 20}}>
          <Col span={6}>
            <SideMenu />
          </Col>
          <Col span={18}>
            <Carousel />
          </Col>
        </Row>
        <ProductCollection
          title={
            <Typography.Title level={3} type="warning">
              {t("home_page.hot_recommended")}
            </Typography.Title>
          }
          sideImage={sideImage}
          products={productList[0].touristRoutes}
        />
        <ProductCollection
          title={
            <Typography.Title level={3} type="danger">
              新品上市
            </Typography.Title>
          }
          sideImage={sideImage2}
          products={productList[1].touristRoutes}
        />
        <ProductCollection
          title={
            <Typography.Title level={3} type="success">
              国内游推荐
            </Typography.Title>
          }
          sideImage={sideImage3}
          products={productList[2].touristRoutes}
        />
        <BusinessPartners />
      </div>
      <Footer />
    </>
    )
  }
}

export const HomePage = connect(
  mapStateToProps,
  mapDispatchToProps
)(withTranslation()(HomePageComponent));
